layui.define(["jquery", "layer", 'form'], function (exports) {
    var $ = layui.$,
        layer = layui.layer,
        form = layui.form;

    var mSetting = {
        render: function() {
            mSetting.renderTheme();
            mSetting.renderLayout();
            mSetting.listen();
        },
        renderTheme: function() {
            var themeId = getTheme()
            var html = ''
            $.each(setter.theme, function(key, val) {
                if (themeId === val.name) {
                    html += '<li class="layui-this" data-select-bgcolor="' + val.name + '">';
                } else {
                    html += '<li data-select-bgcolor="' + val.name + '">';
                }
                html += '<a href="javascript:void(0)" data-skin="skin-blue" class="clearfix full-opacity-hover">\n';
                html += '<div>\n';
                html += '<span class="logo" style="background: ' + val.logoBgColor + ';"></span>\n';
                html += '<span class="header" style="background: ' + val.headerBgColor + ';"></span>\n';
                html += '</div>\n';
                html += '<div>\n'; 
                html += '<span class="side" style="background: ' + val.sideBgColor + ';"></span>\n';
                html += '<span class="main" style="background: #f4f5f7;"></span>\n';
                html += '</div>\n';
                html += '</a>\n'
                html += '</li>';
            })
            $('.setting-skin-box').html(html);
        },
        renderLayout: function() {
            if (getData(setter.store.sideShrink) === true) {
                $('input[lay-filter="toggleSideFlexible"]').attr('checked', true)
            }
            if (getData(setter.store.headerHidden) === true) {
                $('input[lay-filter="toggleHeaderHidden"]').attr('checked', true)
            }
            if (getData(setter.store.footerHidden) !== true) {
                $('input[lay-filter="toggleFooterHidden"]').attr('checked', true)
            }
            form.render()
        },
        listen: function() {
            $('body').on('click', '[data-select-bgcolor]', function() {
                var bgcolorId = $(this).attr('data-select-bgcolor');
                $('.setting-skin-box .layui-this').removeClass('layui-this');
                $(this).addClass('layui-this');
                mSetting.adminEvent('changeTheme', bgcolorId);
            });
            form.on('switch(toggleSideFlexible)', function(data) {
                mSetting.adminEvent($(this).attr('lay-filter'), $(this));
            });
            form.on('switch(toggleHeaderHidden)', function(data) {
                mSetting.adminEvent($(this).attr('lay-filter'), $(this));
            });
            form.on('switch(toggleFooterHidden)', function(data) {
                mSetting.adminEvent($(this).attr('lay-filter'), $(this));
            });
        },
        adminEvent: function(attrEvent, othis) {
            mSetting.events[attrEvent] && mSetting.events[attrEvent].call(this, othis);
        },
        events: parent.mAdmin.events
    };

    exports('mSetting', mSetting);
})